<template>
	<div class="common-table">
		<el-table
			ref="tableSortRef"
			style="width: 100%; height: 100%"
			tooltip-effect="dark"
			v-loading="listLoading"
			border
			:data="tableData"
			:height="height"
			@selection-change="setSelectRows"
			@sort-change="tableSortChange"
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<!-- 复选列 -->
			<el-table-column v-if="selectionIsShow" type="selection" reserve-selection width="55" />

			<!-- 序号 -->
			<el-table-column v-if="indexIsShow" label="序号" width="60" type="index"></el-table-column>

			<el-table-column
				v-for="(column, index) in tableOption"
				:key="index"
				:prop="column.prop"
				:label="column.label"
				:width="column.width"
				:show-overflow-tooltip="overflowTip"
			></el-table-column>

			<el-table-column v-if="showHandleButton" fixed="right" label="操作" :width="handleColWidth">
				<template slot-scope="scope">
					<el-button v-if="showHandleEdit" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>

					<el-button v-if="showHandleDelete" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>

					<el-button v-if="showHandleDetail" type="warning" @click="handleDetail(scope.row)"> 详情 </el-button>

					<slot name="customButton" :row="scope.row"></slot>
				</template>
			</el-table-column>

			<template #empty>
				<el-empty class="vab-data-empty" description="暂无数据" />
			</template>
		</el-table>

		<div v-if="total > 0" class="pagination">
			<el-pagination
				background
				:current-page="pageNo"
				:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:total="parseInt(total)"
				layout="total, sizes, prev, pager, next, jumper"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</div>
	</div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
	name: 'ComprehensiveTable',
	components: {},
	props: {
		tableOption: {
			type: Array,
			default: () => {
				return [];
			},
		}, //表头

		tableData: {
			type: Array,
			default: () => {
				return [];
			},
		}, //表格数据

		showHandleButton: {
			type: Boolean,
			default: false,
		}, //是否显示操作列

		handleColWidth: {
			type: Number,
			default: 200,
		}, //操作列列宽

		height: {
			type: Number,
			default: 650,
		}, //表格高度

		showHandleEdit: {
			type: Boolean,
			default: false,
		}, //编辑按钮

		showHandleDelete: {
			type: Boolean,
			default: false,
		}, //编辑按钮

		showHandleDetail: {
			type: Boolean,
			default: false,
		}, //详情按钮

		selectionIsShow: {
			type: Boolean,
			default: false,
		}, //是否显示多选列

		indexIsShow: {
			type: Boolean,
			default: false,
		}, //是否显示索引列

		overflowTip: {
			type: Boolean,
			default: true,
		}, //超长时是否显示tooltip

		total: {
			type: [String, Number],
			default: 0,
		}, //数据总条数
	},

	setup(props, { emit }) {
		const state = reactive({
			pageNo: 1,
			pageSize: 10,
		});

		//每页展示条数
		const handleSizeChange = (val) => {
			state.pageSize = val;
			emit('handleSizeChange', val);
		};

		//页面展示第几页
		const handleCurrentChange = (val) => {
			state.pageNo = val;
			emit('handleCurrentChange', val);
		};

		//删除
		const handleDelete = (row) => {
			ElMessageBox.confirm('你确定要删除当前项吗?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					emit('handleDelete', row);
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '操作取消',
					});
				});
		};

		//详情
		const handleDetail = (row) => {
			emit('handleDetail', row);
		};

		// 编辑
		const handleEdit = (row) => {
			emit('handleEdit', row);
		};

		return {
			...toRefs(state),
			handleSizeChange,
			handleCurrentChange,
			handleEdit,
			handleDelete,
			handleDetail,
		};
	},
});
</script>

<style>
.pagination {
	justify-content: right !important;
	margin-top: 10px;
}
</style>
